<template>
	<div class="scroll">
		<div style='padding: 8rem 4rem 4rem;background-color: #42B983;'>
			<scroll :list='list' :align='99' height='50' class='wrap' @getNumber='getNumber($event)'>
			</scroll>
			<div>{{num}}</div>
		</div>
		<div class="zvl-layout">
			<btn class='zvl-8'>按钮</btn>
			<btn class='zvl-8 zvl-offset-2' :disabled='true'>按钮</btn>
		</div>
		<m-select :option='option'></m-select>
	</div>
</template>

<script type="text/ecmascript-6">
	import tween from 'assets/tween'
	import Scroll from 'C/scroll'
	import Btn from 'C/btn'
	import MSelect from 'C/select'
	export default {
		components: {
			Scroll,
			Btn,
			MSelect
		},
		data() {
			let list = []
			for(let i = 99; i >= 0; i--) {
				if(i > -1 && i < 10) {
					list.push('0' + i)
				} else {
					list.push(i + '')
				}

			}
			return {
				list: list,
				num : '00',
				option:['123','321']
			}
		},
		methods: {
			getNumber(e) {
				this.num = e
			},
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		height: calc(100% - 8rem);
		background-color: #fff;
		.wrap {
			overflow: hidden;
			height: 50px;
			border-radius: 5px;
			width: 66px;
			position: relative;
			background-color: #fff;
		}
	}
</style>